<template>
  <div>
    <div id="bar1"></div>
  </div>
</template>

    <script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: ""
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("bar1"));

      this.chart.setOption({
         grid: {
            containLabel: true,
            bottom: '10%',
            top: '20%',
            left: '5%',
            right:'5%',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          legend: {
            top: '8%',
            right: '10%',
            data: ['负荷情况'],
            itemWidth: 18,
            itemHeight: 18,
            itemGap: 30,
            textStyle: {
              fontSize: 18,
              color: '#C9D2FA',
              padding: [0, 0, 0, 10],
            },
          },
          xAxis: {
            // name: "班级",
            triggerEvent: true,
            data: ['ASSY-02', 'ASSY-03', 'ASSY-04', 'ASSY-05', 'ASSY-06'],
            axisLabel: {
              interval: 0,
              show: true,
              fontSize: 18,
              color: '#C9D2FA',
            },
            axisLine: {
              show: false,
              lineStyle: {
                show: false,
                color: '#F3F3F3',
                width: 2,
              },
            },

            axisTick: {
              show: false,
            },
          },
          yAxis: [
            {
              // name: '单位:万',
              // type: 'value',
              // nameTextStyle: {
              //   color: '#444444',
              // },
              splitNumber: 4,
              axisLabel: {
                show: true,
                fontSize: 18,
                color: '#C9D2FA',
                formatter: function (value) {
                  // 在标签后面添加百分号
                  return value + '%';
                },
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                  color: '#3E4A82',
                },
              },
            },
          ],
          series: [
            {
              name: '负荷情况',
              type: 'bar',
              silent: true,
              itemStyle: {
                color: function (params) {
                  if (params.value > 110) {
                    return '#DE4646';
                  } else if (params.value <= 110 && params.value >= 90) {
                    return '#2F8FFF';
                  } else {
                    return '#FF932F';
                  }
                },
              },
              barWidth: 30,
              data: [96, 108, 150, 89, 94],
              label: {
                show: true, // 显示标签
                position: 'top', // 标签显示在柱状图的上方
                fontSize: 14,
                color: '#fff',
                formatter: function (params) {
                  // 在标签文本后添加百分号
                  return params.value + '%';
                },
              },
              markLine: {
                symbol: 'none', // 可以设置标记点的样式，这里设置为 'none'
                lineStyle: {
                  color: '#51D365', // 设置直线的颜色
                  type: 'solid', // 设置直线的类型，可选值有：'solid', 'dashed', 'dotted' 等
                  width: 2, // 设置直线的宽度
                },
                data: [
                  {
                    name: '安全线',
                    yAxis: 100,
                    label: {
                      show: true,
                      position: 'start', // 设置标签文本的位置为起始位置
                      color: '#51D365',
                      formatter: '安全线', // 显示标签文本为 "安全线"
                    },
                  },
                ],
                // label: {
                //   show: false,
                // },
                silent: true,
                // animation: true,
              },
            },
          ],
      });
    }
  },
  beforeDestroy() {
    //   console.log(this.chart);
    this.chart.dispose();
    this.chart = "";
    // console.log('------------------销毁阶段------------------')
    // console.log(this.chart);
    // 仍可以使用data与method方法
    //   console.log(`这是beforeDestroy的执行:${this.name}`)
  }
};
</script>

    <style lang="scss" scoped>
#bar1 {
  width: 100%;
  height: 40vh;
      // background-color: #554444;
}
</style>